import React, { ChangeEvent, useState } from "react";
import {Button, FormControl} from 'react-bootstrap'
const ReadFromExcel:React.FC = ()=> {

    const [selectedFile,setSelectedFile] = useState<File>()

    const onSelectFile = (event:ChangeEvent<HTMLInputElement>)=> {
        if(event.target.files){
            setSelectedFile(event.target.files[0]);
        }
    }


    return (<>
    Read from excel(as the excel is small scale to train, it could be not used generally)
    <p>Upload excel to server</p>
    <div>
        <FormControl type="file" placeholder="Please select excel file" onChange={onSelectFile}></FormControl>
        <Button>Upload</Button>
    </div>
    <p>Display Excel content here</p>
    
    <p>Specify Input Columns</p>
    <p>Specify Output Column</p>
    </>)
}

export default ReadFromExcel